<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="admin/head :: head" th:with="title=工单类型添加">
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <form class="layui-form" action="" lay-filter="formfilter">
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>名称:</label>
                <div class="layui-input-block">
                    <input type="text" id="name" name="name"  lay-verify="required|name" autocomplete="off" placeholder="名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" id="parentM">
                <label class="layui-form-label"><span style="color: red">*</span>类型:</label>
                <input type="hidden" id="maxLevel" value="0">
                <input type="hidden" id="parentId" name="parentId">
                <div class="layui-input-inline" id="parent1">
                    <select class="layui-select" id="parentId1" name="parentId1" lay-filter="getType">
                        <option value="">请选择</option>
                        <option th:each="t,tState:${ typeList}" th:value="${t.id}" th:text="${t.name}" ></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>位置:</label>
                <div class="layui-input-block">
                    <input type="text" id="position" name="position"  lay-verify="required|position" autocomplete="off" placeholder="位置" class="layui-input" value="10">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>状态:</label>
                <div class="layui-input-block">
                    <input type="checkbox"  lay-filter="statusShow" lay-skin="switch" lay-text="启用|不启用">
                    <input type="hidden" id="status" name="status" value="0">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="formSubmit">立即提交</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>


    layui.use(['layer', 'jquery','liuQi'], function () {
            var form = layui.form,
                    liuQi = layui.liuQi;

            form.on('switch(statusShow)', function(data){
                $("#status").val(this.checked?1:0);
            });

            form.render();

            //自定义验证规则
            form.verify({
                parentId: function (value) {
                },
                name: function (value) {
                },
                position: function (value) {
                },
                status: function (value) {
                },
            });

            form.on('select(getType)',function(data){
                //获取当前id
                var typeId=data.value;
                var num=parseInt(data.elem.id.replace("parentId",""));
                var maxLevel= $("#maxLevel").val();
                if(maxLevel>num){
                    for(var level=num+1;level<=maxLevel;level++){
                        $("#parent"+level).remove();
                    }
                    form.render();
                }
                var newNum=num+1;
                $("#maxLevel").val(newNum);

                if(typeId>0){
                    $("#parentId").val(typeId);
                    $.ajax({
                        url:"/admin/helpType/getByTypeId",
                        data:{"typeId":typeId},
                        dataType:"json",
                        success:function(data){
                            if(data.code==0){
                                var arr="";
                                if(data.obj.length>0){
                                    for(var i=0;i<data.obj.length;i++){
                                        arr+="<option value='"+data.obj[i].id+"'>"+data.obj[i].name+"</option>";
                                    }
                                    var html="<div class='layui-input-inline' id='parent"+newNum+"'>" +
                                        "                    <select class='layui-select' id='parentId"+newNum+"' name='parentId"+newNum+"' lay-filter='getType'>" +
                                        "                        <option value=''>请选择</option>" +arr;
                                        "                    </select>" +
                                        "                </span>";
                                        "      </div>";
                                    $("#parentM").append(html);
                                    form.render();
                                }
                            }
                        }
                    });
                }else{
                    var typeId=$("#parentId"+(num-1)).val();
                    if(typeId==undefined){
                        typeId=0;
                    }
                    $("#parentId").val(typeId);
                }
            });

            //监听提交
            form.on('submit(formSubmit)', function (data) {
                data=data.field;
                liuQi.ajax("/admin/helpType/add",data,
                        function (data) {
                            //关闭
                            parent.layer.msg(data.msg);
                            parent.layui.table.reload('currentTableId');
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        }
                );
                return false;
            });
    });

</script>

</body>
</html>